<template>
	<!-- 我的-我的粉丝 -->
	<view class="myFans">
		
		<view class="tap_swiper" :style="'top:'+(2*menuButtonInfo.top +80)+'rpx'">
			<!-- :active-item-style='{"fontSize": "40rpx"}' -->
			<u-tabs-swiper  :bar-style='{"backgroundColor": "#F10200"}'
		
				height=90 font-size=34 :bold="false" active-color="#2D3034" inactive-color="#C8CACC" ref="uTabs"
				:list="list" :current="current" @change="tabsChange" :is-scroll="true" swiperWidth="750">
			</u-tabs-swiper>
		</view>
		<!-- calc(${100}vh - ${(2*menuButtonInfo.top +160)}rpx) -->
		<!-- 		<swiper class="swiperBox"
			:style="{'paddingTop' : (2*menuButtonInfo.top +160)+'rpx',height : `100vh`}"
			:current="swiperCurrent" @transition="transition" @animationfinish="animationfinish"> -->
		<swiper class="swiperBox" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
			<swiper-item class="swiper-item" v-for="(newItem,newIndex) in list" :key="newIndex">
				<scroll-view scroll-y style="width: 100%; height: 100%;" @scrolltolower="onBottom">
		
					<fanslist :loadStatux="loadStatux" :userArr="newItem.batlis"
						@userFollows="userFollow">
					</fanslist>
					

				</scroll-view>

			</swiper-item>

		</swiper>


		<!-- 相互关注 -->
		<u-popup v-model="isPuper" mode="center" border-radius="12">
			<view class="puperBox">
				<image class="puperBoxImg" src="https://z3.ax1x.com/2021/09/02/hrR3PH.png"></image>
				<view class="puperBoxTitle">相互关注</view>
				<view class="puperBoxText">一定是有种特殊吸引力</view>
				<view class="puperBoxButs" @click="isPuper = false">
					知道了
				</view>
			</view>
		</u-popup>


	</view>
</template>

<script>
	import fanslist from "../../../components/fanslist/fanslist.vue"
	import empty from "@/components/defaultpage/empty.vue"
	import network from "@/components/defaultpage/network.vue"
    import loading from '../../../components/loading/loading.vue'
	export default {
		data() {
			return {
				// menuButtonInfo: {
				// 	top: 25
				// },
				isCircle: true,
				followIndex: -1,
				list: [{
					name: '我的关注',
					batlis: []
				}, {
					name: '我的粉丝',
					batlis: []
				}, {
					name: '相互关注',
					batlis: []
				}, ],
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				userArr: [],
				pageNum: 1,
				pageSize: 10,
				isTrue: true,
				loadStatux: 'Loading',
				isPuper: false,
				newStatus: ''

			}
		},
		components: {
			fanslist,
			empty,
			network,
			loading
		},
		onLoad(param) {
			// debugger
			this.init(param)
		},
		onReachBottom() {
			// debugger


		},
		onShow(param) {
			// debugger

		},
		watch: {
			swiperCurrent(newVal, oldVal) {
				if (newVal != oldVal) {
					this.isTrue = true;
				        
						this.initData();
	
					
				}
			},
			pageNum(newVal, oldVal) {
			
					this.isCircle = true;
				
			}
		},
		methods: {
			init(param) {
				// // #ifndef H5 || APP-PLUS || MP-ALIPAY
				// this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
				// // #endif
				// 
				if (param) {
					console.log("param", param)
					console.log("param.followIndex", param.followIndex)
					
					
					this.$nextTick(()=>{
						this.swiperCurrent = param.followIndex;
						this.initData();
					})
				
					
						
					
					

					// this.initData();
				}

			},
			onBottom() {
				console.log('触底了！！！！');
				if (this.isTrue) {
					this.loadStatux = 'Loading';
					this.pageNum++;

					
						this.initData();
						// this.loadStatux = 'loadmore';
				
				}
			},


			// 请求数据
			initData() {
				
				let req = {};
				req.pageNum = this.pageNum;
				req.pageSize = this.pageSize;
				if (this.swiperCurrent == 0) {
					this.$apis.userFollowFollow(
						 
						 this.pageSize,
						 this.pageNum
					).then(res => {
						if (res.code == 200) {
							this.package(0, res.rows);
						}
					});
				} else if (this.swiperCurrent == 1) {
					this.$apis.userFollowFans(
					 this.pageSize,
					 this.pageNum
					).then(res => {
						if (res.code == 200) {
							this.package(1, res.rows);
						}
					});
				} else if (this.swiperCurrent == 2) {
					this.$apis.userFollowEachOther(
						this.pageSize,
						this.pageNum
					).then(res => {
						if (res.code == 200) {
							this.package(2, res.rows);
						}
					});
				}
			},
			// 关注按钮
			userFollow(userId) {
				uni.requestSubscribeMessage({
					tmplIds: ['yzeIVWnmxfVOiswyRy127nj8gghks_4J4vkGNBcsA2E'],
					success: ress => {
						console.log("订阅成功", ress)
					},
					complete: c => {
						this.$apis.userFollow(
							 userId
						).then(res => {
							if (res.code == 200) {
								let brr = [];
								brr = this.$Tools.deepCapy(brr, this.list);
						
								brr.forEach(item => {
									let crr = JSON.parse(JSON.stringify(item.batlis))
									item.batlis.forEach((newItem, newIndex) => {
										console.log(newItem.fansId, userId)
										if (newItem.fansId == userId) {
											if (this.swiperCurrent != 1) {
												// .splice(1,2)
												item.batlis.splice(newIndex, 1);
												uni.showToast({
													title: res.data == "00" ? "关注已取消" : "",
													duration: 2000
												})
						
											} else if (this.swiperCurrent == 1) {
						
												// 0:相互关注 未关注:1 2:单方面关注
												//关注状态 00未关注 10=已关注 01=被关注 11=相互关注
												newItem.state = ((res.data == "00") || (res.data ==
														"01")) ? 1 : res.data == "10" ?
													2 : res.data == "11" ? 0 : "";
												if (res.data == "11") {
													this.isPuper = true;
												} else if (((res.data == "00") || (res.data == "01"))) {
													uni.showToast({
														title: "关注已取消",
														duration: 2000
													})
												} else if ((res.data == "10")) {
													uni.showToast({
														title: "已关注",
														duration: 2000
													})
												}
												console.log("newItem撒旦=====>", newItem)
											}
						
										}
									})
						
								});
								// console.log("this.listthis.list前===>", brr)
								// this.$set('list',brr);
								this.list = JSON.parse(JSON.stringify(brr));
								// this.$forceUpdate();
								// console.log("this.listthis.list后===>", this.list)
						
						
							}
						})
					}
				})



				
			},

			package(inNum, data) {
				if (data.length != 0) {
					let newList = [];

					data.forEach(item => {
						let fansId = this.swiperCurrent == 0 ? item.userId : item.fansId
						newList.push({
							eachFollow: item.eachFollow,
							fansId: fansId,
							followId: item.followId,
							address: item.user.address,
							age: item.user.age,
							amianCoin: item.user.amianCoin,
							avatar: item.user.avatar,
							gender: item.user.gender,
							labelCloud: item.user.labelCloud,
							nickname: item.user.nickname,
							post: item.user.post,
							idx: item.followId,
							url: `/pages/my/fanDetails/fanDetails?fansId=${fansId}`
						})
					})
					// uni.navigateTo({
					// 	url: 
					// })


					newList.forEach(item => {
						if (inNum == 0) {
							// 0:相互关注 未关注1: 2:单方面关注
							item.state = item.eachFollow ? 0 : 2;
						} else if (inNum == 1) {
							// 0:未关注  1:相互关注 2:单方面关注
							item.state = item.eachFollow ? 0 : 1;
						} else if (inNum == 2) {
							// 0:未关注  1:相互关注 2:单方面关注
							item.state = 0;
						}
					})
					let newBatlis = JSON.parse(JSON.stringify(this.list[inNum].batlis));
					
					newBatlis = [...newBatlis, ...newList];
					newBatlis = this.deWeight(newBatlis);
					this.list[inNum].batlis = JSON.parse(JSON.stringify(newBatlis));
					this.loadStatux = "";
					this.newStatus = this.loadStatux;
					if (data.length < this.pageSize) {
						// debugger
						console.log('到底了')
						this.isTrue = false;
						this.loadStatux = 'moduleNomore';
						this.newStatus = this.loadStatux;
					}

					console.log('想要的数据====>', this.list);
				} else {
					console.log('到底了')
					this.isTrue = false;
					this.loadStatux = 'moduleNomore';
					this.newStatus = this.loadStatux;
					if(this.pageNum == 1){
						this.loadStatux = 'empty';
						this.newStatus = this.loadStatux;
					}
				}
		
			},
			// 数组去重
			//  方法2：利用reduce方法遍历数组,reduce第一个参数是遍历需要执行的函数，第二个参数是item的初始值
			deWeight(arr) {
				var obj = {};
				let newArr = arr.reduce(function(item, next) {
					obj[next.idx] ? '' : obj[next.idx] = true && item.push(next);
					return item;
				}, []);
				return newArr;
			},
			goNavigateBack() {
				uni.navigateBack()
			},
			follow(index) {
				this.followIndex = index
				console.log("this.followIndex", this.followIndex)
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				this.loadStatux = 'Loading';
				let dx = e.detail.dx;
				this.isCircle = true;
				if(dx == 0){
					// debugger
					this.loadStatux = this.newStatus;
				}
				this.$refs.uTabs.setDx(dx);
				
			
			},
			// tabs通知swiper切换
			tabsChange(index) {
				// debugger
				
				this.swiperCurrent = index;
			},
			
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},

		}
	}
</script>
<style>
	/* page不能写带scope的style标签中，否则无效 */
	page {
		height: 100%;
	}
</style>
<style lang="scss">
	.myFans {

		.puperBox {
			width: 550rpx;
			height: 514rpx;
			background: #ffffff;
			border-radius: 12rpx;
			box-shadow: 0px 2rpx 0px 0px #ededed inset;
			text-align: center;
		}

		.puperBoxImg {
			width: 160rpx;
			height: 160rpx;
			margin: 60rpx 0px 0px;
		}

		.puperBoxTitle {
			font-size: 18px;
			font-family: Source Han Sans SC, Source Han Sans SC-Bold;
			font-weight: 700;
			text-align: CENTER;
			color: #2d3034;
			margin: 28rpx 0 15rpx;
		}

		.puperBoxText {
			font-size: 30rpx;
			font-family: Source Han Sans SC, Source Han Sans SC-Regular;
			font-weight: 500;
			text-align: CENTER;
			color: #606266;
		}

		.puperBoxButs {
			font-size: 34rpx;
			font-family: Source Han Sans CN, Source Han Sans CN-Bold;
			font-weight: 700;
			text-align: CENTER;
			color: #606266;
			border-top: 2rpx solid #e3e4e4;
			height: 100rpx;
			line-height: 100rpx;
			/* background: #360; */
			position: absolute;
			width: 100%;
			bottom: 0px;
		}

		.bg_top {
			width: 750rpx;
			background-color: #ffffff;
			position: fixed;
			z-index: 9;
		}

		.z_index {
			z-index: 10;
		}

		.top {
			width: 750rpx;
			height: 48rpx;
			background-color: #FFFFFF;
			position: fixed;
			padding-bottom: 20rpx;
		}

		.top_icon {
			margin-left: 32rpx;
			display: inline-block;
		}

		.top_title {
			position: absolute;
			font-size: 34rpx;
			font-weight: 500;
			line-height: 48rpx;
			display: inline-block;
			left: 50%;
			transform: translate(-50%);
		}

		.box_ {}

		.box {
			position: fixed;
			padding: 0 40rpx;
			width: 670rpx;
			height: 104rpx;
			background: #f5f6f9;
			line-height: 104rpx;
			text-align: center;
		}

		.box :nth-child(n) {
			width: 223rpx;
			display: inline-block;
			color: #909499;
			font-size: 30rpx;
			font-weight: 700;
			position: relative;
			vertical-align: top;
		}

		.box_hr {
			position: absolute;
			top: -20rpx;
			width: 120rpx !important;
			height: 4rpx;
			background: #f10200;
		}

		.box2 {
			width: 750rpx;
			/* margin: 0 40rpx; */
		}

		.box2_list_ {
			width: 750rpx;
			border-bottom: 2rpx solid #f5f6f9;
		}

		.box2_list {
			width: 670rpx;
			height: 160rpx;
			position: relative;
			margin: 0 40rpx;
			/* line-height: 160rpx; */
		}

		.list_image {
			margin-top: 24rpx;
			margin-right: 24rpx;
			display: inline-block;
			vertical-align: top;
		}

		.list_image image {
			width: 112rpx;
			height: 112rpx;
			border-radius: 50%;
		}

		.list_name {
			display: inline-block;
			margin-top: 36rpx;
			vertical-align: top;


			/* for Opera */
		}

		.name {
			color: #2d3034;
			font-size: 30rpx;
			font-weight: 500;
			line-height: 44rpx;
		}

		.name_ {
			margin-top: 4rpx;
			color: #606266;
			font-size: 26rpx;
			line-height: 38rpx;

			width: 90%;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			-o-text-overflow: ellipsis;
		}

		.state {
			display: inline-block;
			position: absolute;
			right: 0;
			top: 50%;
			transform: translateY(-50%);
		}

		.state1 {
			padding: 0 13rpx;
			background: #f10200;
			border-radius: 4px;
			color: #ffffff;
			font-size: 26rpx;
			height: 45rpx;
			line-height: 45rpx;
		}

		.state2 {
			background: #f10200;
			border-radius: 4px;
			color: #000000;
			font-size: 26rpx;
			height: 45rpx;
			line-height: 45rpx;
			padding: 0 13rpx;
			display: flex;
			align-items: center;

		}

		.state2 image {
			vertical-align: top;
			width: 26rpx;
			height: 28rpx;
			margin-right: 8rpx;
		}

		.state2 text {
			position: relative;
			// top: -4rpx;
			color: #000000;
			font-weight: 700;
		}

		.state3 {
			padding: 0 13rpx;
			background: #909499;
			border-radius: 4px;
			color: #ffffff;
			font-size: 26rpx;
			height: 45rpx;
			line-height: 45rpx;
		}

		.tap_swiper {
			position: fixed;
			width: 100%;
			z-index: 9;

		}

		.swiperBox {
			// height: 100% !important;
			background: #fff;
			// padding-top: 90rpx;
			height: calc(100vh - 90rpx);
			position: fixed;
			top: 90rpx;
			width: 100%;
			// background-color: #360;
			// margin-top: 87rpx;
			// !important;
		}

		.u-tabs {}

		.swiper-item {
			// margin: 20rpx 40rpx 0px;
			overflow: scroll;
		}

		.u-tabs-scroll-box {
			// display: flex;
			// justify-content: space-evenly;
			margin-left: 12%;
		}

		.u-tabs-item {
			font-size: 34rpx;
			font-family: Source Han Sans CN, Source Han Sans CN-Bold;
			color: #C8CACC;
			font-weight: 550 !important;
			width: 190rpx;
		}

		// .circle {
		// 	width: 100%;
		// 	height: 100%;
		// 	display: flex;
		// 	justify-content: center;
		// 	align-items: center;
		// }

		// .circle_ {
		// 	position: absolute;
		// 	left: 50%;
		// 	transform: translateX(-100%);
		// }
	}
</style>
